<template>
  <div>
    <el-drawer
      :visible.sync="isDrawer"
      :direction="direction"
      :size="this.$store.state.user.userIsPhone ? '90%' : '435px'"
      :with-header="false"
    >
      <template slot="title">
        <div class="drawer-title"></div>
      </template>
      <div class="drawer-title">
        <div class="drawer-title">修改项目基本信息</div>
        <div class="iconfont icon-guanbi" @click="isDrawer = false"></div>
      </div>
      <div class="head-box">
        <div class="identifier-box"></div>
        <div>项目信息</div>
      </div>
      <div class="info-box">
        <div class="left-box">
          <div>项目编号：</div>
          <div>项目简称：</div>
          <div>项目全称：</div>
          <div>所处阶段：</div>
          <div>所处城市：</div>
        </div>
        <div class="right-box">
          <div>&emsp;{{ proCode }}</div>
          <div><input type="text" v-model="proShortName" /></div>
          <div><input type="text" v-model="proName" /></div>
          <div>
            <el-select v-model="stage" placeholder="请选择阶段">
              <el-option
                v-for="item in stageOption"
                :key="item.proStage"
                :label="item.stageName"
                :value="item.proStage"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-cascader
              v-model="proCity"
              :options="cityList2"
              @change="handleChange"
            ></el-cascader>
          </div>
        </div>
      </div>
      <div class="head-box">
        <div class="identifier-box"></div>
        <div>成员信息</div>
      </div>
      <div class="personnel-box">
        <div class="left-box">
          <div>销售负责人：</div>
          <div>电气负责人：</div>
          <div>工程负责人：</div>
          <div>研发负责人：</div>
          <div>合同负责人：</div>
        </div>
        <div class="right-box">
          <div>
            <el-select filterable v-model="sale" placeholder="请选择销售负责人">
              <el-option
                v-for="(item, index) in perOptions"
                :key="index"
                :label="item.name"
                :value="item.empcode"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select
              filterable
              v-model="electrical"
              placeholder="请选择电气负责人"
            >
              <el-option
                v-for="(item, index) in perOptions"
                :key="index"
                :label="item.name"
                :value="item.empcode"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select
              filterable
              v-model="engineering"
              placeholder="请选择工程负责人"
            >
              <el-option
                v-for="(item, index) in perOptions"
                :key="index"
                :label="item.name"
                :value="item.empcode"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select
              filterable
              v-model="research"
              placeholder="请选择研发负责人"
            >
              <el-option
                v-for="(item, index) in perOptions"
                :key="index"
                :label="item.name"
                :value="item.empcode"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select
              filterable
              v-model="contract"
              placeholder="请选择合同负责人"
            >
              <el-option
                v-for="(item, index) in perOptions"
                :key="index"
                :label="item.name"
                :value="item.empcode"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="head-box" style="height: 0"></div>
      <div class="btn-box">
        <div class="remove-btn" @click="cancellation">取消</div>
        <div class="sub-btn" @click="submitUpdate">提交</div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getProjectInfoApi,
  getProjectContractApi,
  getProjectTeamApi,
  getProjectMilestonesApi,
  getProjectDutyApi,
  getEmpolyeeListApi,
  updateProApi
} from '@/api/index'

import cityList2 from '@/config/cityList2'

export default {
  props: {
    drawer: {
      type: Boolean,
      default: false
    },
    projectRow: {
      type: Object,
      default: false
    },
    getAllProjectData: {
      type: Function,
      default: undefined
    }
  },
  computed: {
    cityList2 () {
      return cityList2
    }
  },
  data () {
    return {
      // 当前项目
      row: '',
      // 是否弹出抽屉
      isDrawer: false,
      // 抽屉弹出方向
      direction: 'rtl',
      proCode: '',
      proName: '',
      proShortName: '',
      // 城市列表
      cityFixList: [],
      // 选中的城市
      proCity: [],
      // 阶段源数据
      stageOption: [
        {
          proStage: 'SalesResearch',
          stageName: '售前调研'
        },
        {
          proStage: 'Develop',
          stageName: '研发阶段'
        },
        {
          proStage: 'ElectricImplement',
          stageName: '电气实施'
        },
        {
          proStage: 'Design',
          stageName: '产品设计'
        },
        {
          proStage: 'DebugTogether',
          stageName: '联调阶段'
        },
        {
          proStage: 'Waiting4Sign',
          stageName: '等待验收'
        },
        {
          proStage: 'Finish',
          stageName: '已完成'
        }
      ],
      // 选择的阶段
      stage: '',
      // 选取的日期
      dayData: new Date(),
      // 展示的日期
      dayArr: [],
      // 项目信息
      projectData: {
        info: null,
        contract: null,
        team: null,
        dutyTeam: null,
        milestone: {
          SalesResearch: [],
          ElectricImplement: [],
          Design: [],
          Develop: [],
          DebugTogethe: [],
          Waiting4Sign: [],
          Finish: []
        }
      },
      perOptions: [],
      // 销售负责人
      sale: '',
      // 电气负责人
      electrical: '',
      // 工程负责人
      engineering: '',
      // 研发负责人
      research: '',
      // 合同负责人
      contract: '',
      // 合同日期
      contractTime: '',
      // 合同金额
      contractAmount: '',
      // 已汇款
      paymentAmount: '',
      // 预计回款日期
      balanceTime: ''
    }
  },

  mounted () {
    this.initDay()
    this.getEmpolyeeList()
    // this.fixCityList();
  },

  methods: {
    // 清洗城市列表
    fixCityList () {
      for (let i = 0; i <= cityList.length; i++) {
        cityList[i]['value'] = cityList[i]['label']
        if (cityList[i].children) {
          let children = cityList[i].children
          for (let j = 0; j <= children.length; j++) {
            children[j]['value'] = children[j]['label']
          }
        }
      }
    },

    openDrawer (row) {
      this.row = row
      let data = {
        procode: row.procode
      }
      // 基本信息
      this.getProjectInfo(data)
      // 合同信息
      this.getProjectContract(data)
      // 人员信息
      this.getPersonTeam(data)
      this.proName = row.proname
      this.proShortName = row.proshortname
      this.proCode = row.procode
      this.stage = row.prostage
      console.log('人员信息', row)
      this.isDrawer = true
      this.proCity.push(row.procity.split('-')[0], row.procity.split('-')[1])
    },

    async getEmpolyeeList () {
      let res = await getEmpolyeeListApi()
      res.forEach((item, index) => {
        res[index].name = item.empname
      })
      this.perOptions = [ ...res ]
    },

    // 获取当前项目的基本情况
    async getProjectInfo (data) {
      let infoRes = await getProjectInfoApi(data)
      let str = ''
      if (infoRes.length) {
        infoRes.forEach((item, index) => {
          let str1 = index === infoRes.length - 1 ? '' : '、'
          str = str + item.fuctionname + str1
        })
      }
      this.projectData.info = str
      console.log('选中项的基本数据---->', this.projectData)
    },

    // 获取人员信息
    async getPersonTeam (data) {
      let res = await getProjectTeamApi(data)
      this.engineering = res[0].projectmanager
      this.electrical = res[0].electrical
      this.sale = res[0].salescommerce
      this.research = res[0].devleader
      console.log(
        '人员信息----->',
        res,
        this.engineering,
        this.electrical,
        this.sale,
        this.research
      )
    },

    // 获取当前项目的合同信息
    async getProjectContract (data) {
      let contractRes = await getProjectContractApi(data)
      if (!contractRes.length) return
      this.contract = contractRes[0].empname
      console.log('选中项的合同数据---->', contractRes)
    },

    // 打开日期选择器
    openDayChoose () {
      this.$refs.dayChoose.handleClickIcon()
    },

    // 选择的日期变化
    dayDataChange (day) {
      let data = {
        procode: this.projectRow.procode
      }
      this.dayArr = day.split('-')
      console.log('aaaaaaa----->', this.dayArr)
      this.getDutyTeam(data)
    },

    // 初始化当前日期
    initDay () {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      if (year < 10) {
        year = '0' + year
      }
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      this.dayArr = [ year, month, day ]
    },

    // 处理时间
    fixTime (str) {
      let arr = str.split('-')
      let str1 = arr[2].slice(0, 2)
      return arr[0] + '-' + arr[1] + '-' + str1
    },

    // 选择城市
    handleChange (value) {},

    // 提交修改
    async submitUpdate () {
      let data = {
        procode: this.proCode,
        proname: this.proName,
        proshortname: this.proShortName,
        prostage: this.stage,
        proprovince: this.proCity[0],
        procity: this.proCity[1],
        proaddress: '',
        projectmanager: this.engineering,
        electrical: this.electrical,
        salescommerce: this.sale,
        devleader: this.research,
        empcode: this.$store.state.user.userCode
      }
      console.log('提交修改---->', data)
      let res = await updateProApi(data)
      if (res === '更新项目信息成功') {
        this.$message.success('修改成功！！！')
        let data = {
          procode: this.proCode
        }
        this.getAllProjectData()
        // 基本信息
        this.getProjectInfo(data)
        // 合同信息
        this.getProjectContract(data)
        // 人员信息
        this.getPersonTeam(data)
        // this.$router.go(0);
      }
    },

    // 取消修改
    cancellation () {
      let data = {
        procode: this.row.procode
      }
      // 基本信息
      this.getProjectInfo(data)
      // 合同信息
      this.getProjectContract(data)
      // 人员信息
      this.getPersonTeam(data)
      this.proName = this.row.proname
      this.proShortName = this.row.proshortname
      this.proCode = this.row.procode
      this.stage = this.row.prostage
      console.log('人员信息', this.row)
      this.isDrawer = true
      this.proCity.push(
        this.row.procity.split('-')[0],
        this.row.procity.split('-')[1]
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.main-box {
  .drawer-title {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    margin-left: 5px;
    padding: 5px;
    padding-right: 15px;
    font-size: 16px;
    > div {
      font-weight: bold;
    }
    .icon-guanbi:hover {
      cursor: pointer;
    }
  }
  .head-box {
    display: flex;
    align-items: center;
    width: 432px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    font-weight: bold;
    font-size: 13px;
    line-height: 30px;
    text-align: start;
    border-bottom: 1px solid #dddcdc;
    .identifier-box {
      width: 5px;
      height: 10px;
      margin-right: 6px;
      background: #11a70c;
    }
  }
  .info-box {
    display: flex;

    /* border: 1px solid red; */
    width: 100%;
    .left-box {
      width: 100px;
      text-align: end;
      > div {
        width: 100px;
      }
    }
    .right-box {
      width: 60%;
      > div {
        width: 260px;
      }
    }
    .left-box,
    .right-box {
      /* border: 1px solid blue; */
      > div {
        height: 30px;
        margin: 5px 0;
        font-size: 12px;
        line-height: 30px;
        > input {
          width: 92%;
          height: 20px;
          padding-left: 15px;
          border: 1px solid #c8ccce;
          border-radius: 4px;
        }
        .el-select {
          width: 100%;
        }
        .el-cascader {
          width: 100%;
        }
      }
    }
  }
  .personnel-box {
    display: flex;

    /* border: 1px solid red; */
    width: 100%;
    .left-box {
      width: 100px;
      > div {
        width: 100px !important;
      }
    }
    .right-box {
      width: 260px;
      > div {
        width: 260px;
      }
    }
    .left-box,
    .right-box {
      /* border: 1px solid blue; */
      > div {
        height: 30px;
        margin: 5px 0;
        font-size: 13px;
        line-height: 30px;
        text-align: end;
        > input {
          width: 96%;
          height: 20px;
        }
        .el-select {
          width: 100%;
        }
      }
    }
  }
  .contract-box {
    display: flex;

    /* border: 1px solid red; */
    width: 100%;
    padding-left: 8%;
    .left-box {
      width: 100px;
    }
    .right-box {
      width: 60%;
    }
    .left-box,
    .right-box {
      /* border: 1px solid blue; */
      > div {
        display: flex;
        justify-content: end;
        width: 100%;
        height: 30px;
        margin: 5px 0;
        font-size: 13px;
        line-height: 30px;
        > input {
          width: 35%;
          height: 27px;
          margin-right: 5px;
          padding-left: 15px;
          border: 1px solid #c8ccce;
          border-radius: 4px;
        }
        .el-select {
          width: 65%;
        }
        .el-date-editor {
          width: 65%;
        }
      }
    }
  }
  .btn-box {
    display: flex;
    justify-content: end;

    /* border: 1px solid #c40f0f; */
    width: 432px;
    margin: 10px 0;
    padding-right: 10px;
    padding-left: 230px;
    > div {
      width: 60px;
      height: 32px;
      margin-left: 10px;
      color: #fff;
      font-size: 12px;
      line-height: 32px;
      text-align: center;
      background: #85ce61;
      border-radius: 5px;
    }
    > div:hover {
      background: rgba($color: #85ce61, $alpha: 80%);
      cursor: pointer;
    }
    .sub-btn {
      color: #fff;
      background: #67c23a;
    }
    .sub-btn:hover {
      color: #fff;
      background: #85ce61;
      border-color: #85ce61;
      cursor: pointer;
    }
    .remove-btn {
      color: #000;
      background: rgba($color: #000, $alpha: 0%);
      border: 1px solid #dcdfe6;
    }
    .remove-btn:hover {
      color: #409eff;
      background-color: #ecf5ff;
      border-color: #c6e2ff;
      cursor: pointer;
    }
  }
}

@media screen and (width <= 768px) {
  .main-box {
    .drawer-title {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      margin-left: 5px;
      padding: 5px;
      padding-right: 15px;
      font-size: 16px;
      > div {
        font-weight: bold;
      }
      .icon-guanbi:hover {
        cursor: pointer;
      }
    }
    .head-box {
      display: flex;
      align-items: center;
      height: 30px;
      margin-top: 10px;
      margin-bottom: 10px;
      padding-left: 20px;
      font-weight: bold;
      font-size: 13px;
      line-height: 30px;
      text-align: start;
      border-bottom: 1px solid #dddcdc;
      .identifier-box {
        width: 5px;
        height: 10px;
        margin-right: 6px;
        background: #11a70c;
      }
    }
    .info-box {
      display: flex;

      /* border: 1px solid red; */
      width: 100%;
      padding-left: 8%;
      .left-box {
        width: 100px;
        text-align: end;
      }
      .right-box {
        width: 60%;
      }
      .left-box,
      .right-box {
        /* border: 1px solid blue; */
        > div {
          width: 100%;
          height: 30px;
          margin: 5px 0;
          font-size: 12px;
          line-height: 30px;
          > input {
            width: 92%;
            height: 20px;
            padding-left: 15px;
            border: 1px solid #c8ccce;
            border-radius: 4px;
          }
          .el-select {
            width: 100%;
          }
          .el-cascader {
            width: 100%;
          }
        }
      }
    }
    .personnel-box {
      display: flex;

      /* border: 1px solid red; */
      width: 100%;
      padding-left: 8%;
      .left-box {
        width: 100px;
      }
      .right-box {
        width: 60%;
      }
      .left-box,
      .right-box {
        /* border: 1px solid blue; */
        > div {
          width: 100%;
          height: 30px;
          margin: 5px 0;
          font-size: 13px;
          line-height: 30px;
          text-align: end;
          > input {
            width: 96%;
            height: 20px;
          }
          .el-select {
            width: 100%;
          }
        }
      }
    }
    .contract-box {
      display: flex;

      /* border: 1px solid red; */
      width: 100%;
      padding-left: 8%;
      .left-box {
        width: 100px;
      }
      .right-box {
        width: 60%;
      }
      .left-box,
      .right-box {
        /* border: 1px solid blue; */
        > div {
          display: flex;
          justify-content: end;
          width: 100%;
          height: 30px;
          margin: 5px 0;
          font-size: 13px;
          line-height: 30px;
          > input {
            width: 35%;
            height: 27px;
            margin-right: 5px;
            padding-left: 15px;
            border: 1px solid #c8ccce;
            border-radius: 4px;
          }
          .el-select {
            width: 65%;
          }
          .el-date-editor {
            width: 65%;
          }
        }
      }
    }
    .sub-btn {
      display: flex;
      justify-content: end;

      /* border: 1px solid #dddcdc; */
      width: 100%;
      margin: 10px 0;
      padding-right: 10px;
      > div {
        width: 20%;
        height: 30px;
        margin-left: 10px;
        color: #fff;
        line-height: 30px;

        /* border: 1px solid #ee1a1a; */
        text-align: center;
        background: #57a6e7;
        border-radius: 5px;
      }
      > div:hover {
        background: rgba($color: #57a6e7, $alpha: 80%);
        cursor: pointer;
      }
    }
  }
}
</style>